import { Button } from "@nextui-org/button"
import Link from "next/link"

// 公共路径
const baseURL = "https://api-smolder.haiyaogame.com/api/heracles/doc"

const Help = async ({ params }: { params: { slug: string } }) => {
    const { slug } = params

    const posts: Help = await fetch(`${baseURL}/module/help?lang=id`).then((res) => res.json())

    // 判断当前路由是否存在
    const isPath = posts.items.findIndex(item => item.key === slug) != -1

    // 获取目录列表
    const data = await fetch(`${baseURL}/module/help?lang=id`).then(res => res.json())

    // 获取帮助文档内容
    const { content } = await fetch(`${baseURL}/docs/${slug}?lang=id`).then(res => res.json())

    // 内容区样式
    const conSty = "w-[67%] h-full p-4 rounded-lg border-solid border-1 border-[#999]-600 bg-[#fff]"

    return (
        <>
            <Button color="primary">Button</Button>

            <div className="flex justify-between w-[800px] mx-auto">
                {/* 导航栏 */}
                <div className="w-[30%] h-full rounded-lg overflow-hidden border-solid border-1 border-[#999]-600 bg-[#fff]">
                    {
                        data.items?.map((item: HelpItem, index: number) => (
                            <Link
                                key={item.key}
                                className={`block text-xs font-bold px-[15px] py-[10px] cursor-pointer hover:bg-[#f0f2f3] ${item.key === slug ? 'bg-[#f0f2f3]' : ''}`}
                                href={item.key}
                            >
                                {item.title}
                            </Link>)
                        )
                    }
                </div>

                {/* 内容区 */}
                {isPath ? <div className={conSty} dangerouslySetInnerHTML={{ __html: content }}></div> : <div className={conSty}>The corresponding help document does not exist</div>}
                {/* {content && <div className={conSty} dangerouslySetInnerHTML={{ __html: content }}></div>} */}
            </div>
        </>
    )
}

export default Help

// 根据路径生成静态页面
export async function generateStaticParams() {
    const posts = await fetch(`${baseURL}/module/help?lang=id`).then((res) => res.json())

    return posts.items.map((p: HelpItem) => ({ slug: p.key }))
}

// 配置更新时间
export const revalidate = 3600